<script setup>
import { onMounted, ref, markRaw } from "vue";

let map = null;
let marker = null;
let zoom = 12;

onMounted(() => {
  map = markRaw(new T.Map("mapDiv"), {
    attributionControl: false,
    inertia: false,
  });

  map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);

  // ---> S 新增搜索 <---

  //创建搜索对象
  localsearch = new T.LocalSearch(map, {
    pageCapacity: 10, //每页显示的数量
    onSearchComplete: localSearchResult, //接收数据的回调函数
  });

  // ---> E 新增搜索 <---

  //创建比例尺控件对象
  const scale = new T.Control.Scale();
  //添加比例尺控件
  map.addControl(scale);

  const point = new T.LngLat(116.400244, 39.92556);
  marker = new T.Marker(point); // 创建标注
  map.addOverLay(marker);
});

// ---> S 获取本地位置 <---
const location = ref("");
const getLocation = () => {
  if (!navigator.geolocation) {
    ElMessage.error("浏览器不支持地理位置服务");
    return;
  }
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const centerMarker = [position.coords.longitude, position.coords.latitude];
      location.value = centerMarker;
      console.log("【map】centerMarker", centerMarker);
    },
    (err) => {
      ElMessageBox.alert("请开启浏览器/电脑位置服务！");
    }
  );
};

// ---> E 获取本地位置 <---

// ---> S 放大缩小 <---

const zoomIn = () => {
  map.zoomIn();
};

const zommOut = () => {
  map.zoomOut();
};

// ---> E 放大缩小 <---

// ---> S 平移 <---

const panTo = () => {
  map.panTo(new T.LngLat(116.64899, 40.12948));
};

// ---> E 平移 <---

// ---> S 缩放 <---
const setZoom = () => {
  map.setZoom(15);
};
// ---> E 缩放 <---

// ---> S 拖拽   <---

const enableDrag = () => {
  map.enableDrag();
};

// 不可拖拽
const disableDrag = () => {
  map.disableDrag();
};

// ---> E 拖拽   <---

// ---> S 获取可视区域 <---

const obtainTheVisibleArea = () => {
  var bs = map.getBounds(); //获取可视区域
  var bssw = bs.getSouthWest(); //可视区域左下角
  var bsne = bs.getNorthEast(); //可视区域右上角

  console.log("【map】获取可视区域", bs);
  console.log("【map】可视区域左下角", bssw);
  console.log("【map】可视区域右上角", bsne);
};

// ---> E 获取可视区域 <---

// ---> S 设置地图中心点、缩放级别 <---
const centerAndZoom = () => {
  map.centerAndZoom(new T.LngLat(116.64899, 40.12948), 12);
};
// ---> E 设置地图中心点、缩放级别 <---

// ---> S 设置地图显示级别范围 <---
const setZoomLevels = () => {
  map.setMinZoom(Levels[0]);
  map.setMaxZoom(Levels[1]);
};
// ---> E 设置地图显示级别范围 <---

// ---> S 设置地图的显示范围 <---

const setMapRange = () => {
  const bounds = "116.27648,39.84042,116.4605,39.9721".split(",");

  map.setMaxBounds(
    new T.LngLatBounds(
      new T.LngLat(bounds[0], bounds[1]),
      new T.LngLat(bounds[2], bounds[3])
    )
  );
};

const resetMapRange = () => {
  map.setMaxBounds(null);
};
// ---> E 设置地图的显示范围 <---

// ---> S 获取地图中心点坐标 <---
const getMapCenter = () => {
  const centerLng = map.getCenter().getLng();
  const centerLat = map.getCenter().getLat();
  console.log("【map】中心点坐标", centerLng, centerLat);
};
// ---> E 获取地图中心点坐标 <---
// ---> S 获取地图当前缩放级别 <---
const getMapZoom = () => {
  const centerZoom = map.getZoom();
  console.log("【map】当前地图缩放级别", centerZoom);
};
// ---> E 获取地图当前缩放级别 <---
// ---> S 获取地图当前可视范围坐标 <---
const getMapBounds = () => {
  const bs = map.getBounds(); //获取可视区域
  const bssw = bs.getSouthWest(); //可视区域左下角
  const bsne = bs.getNorthEast(); //可视区域右上角
  console.log("【map】当前地图可视范围坐标", bssw, bsne);
};
// ---> E 获取地图当前可视范围坐标 <---

// ---> S 添加标注 <---

const addMarker = () => {
  //创建标注对象
  const marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
  //向地图上添加标注
  map.addOverLay(marker);
};

// ---> E 添加标注 <---
// ---> S 添加图片 <---

const addImage = () => {
  //创图对建片象;
  const icon = new T.Icon({
    iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
    iconSize: new T.Point(19, 27),
    iconAnchor: new T.Point(10, 25),
  });
  //向地图上添加自定义标注
  const marker = new T.Marker(new T.LngLat(116.411794, 39.9068), { icon: icon });
  map.addOverLay(marker);
};

// ---> E 添加图片 <---

// ---> S 移除覆盖物 <---

const clearOverLays = () => {
  map.clearOverLays();
};

// ---> E 移除覆盖物 <---
// ---> S 拖拽 <---

const enableDragging = () => {
  marker.enableDragging();
};
const disableDragging = () => {
  marker.disableDragging();
};

// ---> E 拖拽 <---
// ---> S 显示/隐藏 <---

const showOver = () => {
  marker.show();
};
const hideOver = () => {
  marker.hide();
};

// ---> E 显示/隐藏 <---

// ---> S 标注添加文字 <---
const addLabel = () => {
  const label = new T.Label({
    text: "<b>文字标注!!!<b>",
    position: marker.getLngLat(),
    offset: new T.Point(3, -30),
  });
  map.addOverLay(label);
  marker.enableDragging();
  marker.addEventListener("drag", function (e) {
    label.setLngLat(marker.getLngLat());
  });
};
// ---> E 标注添加文字 <---

// ---> S 添加多个点的标注 <---
const addMarkers = () => {
  const bounds = map.getBounds();
  const sw = bounds.getSouthWest();
  const ne = bounds.getNorthEast();
  const lngSpan = Math.abs(sw.lng - ne.lng);
  const latSpan = Math.abs(ne.lat - sw.lat);
  for (let i = 0; i < 25; i++) {
    const point = new T.LngLat(
      sw.lng + lngSpan * (Math.random() * 0.7),
      ne.lat - latSpan * (Math.random() * 0.7)
    );
    const marker = new T.Marker(point); // 创建标注
    map.addOverLay(marker);
  }
};
// ---> E 添加多个点的标注 <---

// ---> S 自定义覆盖物 <---
const addDefinedOverlay = () => {
  const definedOverlay = T.Overlay.extend({
    initialize: function (lnglat, text, text2, options) {
      this.lnglat = lnglat;
      this.setOptions(options);
      this._text = text;
      this._overText = text2;
    },

    onAdd: function (map) {
      this.map = map;
      var div = (this._div = document.createElement("div"));
      div.style.position = "absolute";
      div.style.backgroundColor = "#EE5D5B";
      div.style.border = "1px solid #BC3B3A";
      div.style.color = "white";
      div.style.height = "18px";
      div.style.padding = "2px";
      div.style.lineHeight = "18px";
      div.style.whiteSpace = "nowrap";
      div.style.MozUserSelect = "none";
      div.style.fontSize = "12px";
      // var span = (this._span = document.createElement("span"));
      // div.appendChild(span);
      // span.appendChild(document.createTextNode(this._text));
      // var that = this;

      // var arrow = (this._arrow = document.createElement("div"));
      // arrow.style.background =
      //   "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
      // arrow.style.position = "absolute";
      // arrow.style.width = "11px";
      // arrow.style.height = "10px";
      // arrow.style.top = "22px";
      // arrow.style.left = "10px";
      // arrow.style.overflow = "hidden";
      // div.appendChild(arrow);

      // div.onmouseover = function () {
      //   this.style.backgroundColor = "#6BADCA";
      //   this.style.borderColor = "#0000ff";
      //   this.getElementsByTagName("span")[0].innerHTML = that._overText;
      //   arrow.style.backgroundPosition = "0px -20px";
      // };

      // div.onmouseout = function () {
      //   this.style.backgroundColor = "#EE5D5B";
      //   this.style.borderColor = "#BC3B3A";
      //   this.getElementsByTagName("span")[0].innerHTML = that._text;
      //   arrow.style.backgroundPosition = "0px 0px";
      // };

      map.getPanes().overlayPane.appendChild(this._div);
      this.update(this.lnglat);
    },

    onRemove: function () {
      var parent = this.div.parentNode;
      if (parent) {
        parent.removeChild(this.div);
        this.map = null;
        this.div = null;
      }
    },

    setLnglat: function (lnglat) {
      this.lnglat = lnglat;
      this.update();
    },
    getLnglat: function () {
      return this.lnglat;
    },
    setPos: function (pos) {
      this.lnglat = this.map.layerPointToLngLat(pos);
      this.update();
    },
    /**
     * 更新位置
     */
    update: function () {
      var pos = this.map.lngLatToLayerPoint(this.lnglat);
      this._div.style.top = pos.y - 36 + "px";
      this._div.style.left = pos.x - 11 + "px";
    },
  });

  var point = new T.LngLat(116.40438, 39.87877);
  var pdefinedOverlay = new definedOverlay(
    point,
    "天坛公园",
    "北京市东城区天坛东路甲1号",
    {}
  );
  map.addOverLay(pdefinedOverlay);
};
// ---> E 自定义覆盖物 <---

// ---> S 新增图片覆盖物 <---

const addImgOverLay = () => {
  const bd = new T.LngLatBounds(
    new T.LngLat(116.38536, 39.91138),
    new T.LngLat(116.39594, 39.9214)
  );
  const img = new T.ImageOverlay(
    "http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg",
    bd,
    {
      opacity: 1,
      alt: "故宫博物院",
    }
  );
  map.addOverLay(img);
};

// ---> E 新增图片覆盖物 <---

// ---> S 点击事件 <---

const MapClick = (e) => {
  console.log("【map】点击事件", e.lnglat.getLng(), e.lnglat.getLat());
};

const addMapClick = () => {
  removeMapClick();
  map.addEventListener("click", MapClick);
};

const removeMapClick = () => {
  map.removeEventListener("click", MapClick);
};
// ---> E 点击事件 <---

// ---> S 移动地图事件 <---

const MapMoveend = (e) => {
  console.log(e.target.getCenter().getLng() + "," + e.target.getCenter().getLat());
};

const addMapMoveend = () => {
  //移除地图的移动停止事件
  removeMapMoveend();
  map.addEventListener("moveend", MapMoveend);
};

const removeMapMoveend = () => {
  map.removeEventListener("moveend", MapMoveend);
};

// ---> E 移动地图事件 <---

// ---> S 滑动鼠标事件 <---

const mouseLngLat = ref("");

const MapMousemove = (e) => {
  mouseLngLat.value = e.lnglat.getLng().toFixed(6) + "," + e.lnglat.getLat().toFixed(6);
};

const addMapMousemove = () => {
  removeMapMousemove();
  map.addEventListener("mousemove", MapMousemove);
};

const removeMapMousemove = () => {
  map.removeEventListener("mousemove", MapMousemove);
};

// ---> E 滑动鼠标事件 <---

// ---> S 标准点击事件 <---
const markLngLat = ref("");
const MarkerClick = (e) => {
  markLngLat.value = e.lnglat.getLng() + "," + e.lnglat.getLat();
};

const addMarkerClick = () => {
  removeMarkerClick();
  //注册标注的点击事件
  marker.addEventListener("click", MarkerClick);
};
const removeMarkerClick = () => {
  marker.removeEventListener("click", MarkerClick);
};

// ---> E 标准点击事件 <---

// ---> S 传递事件参数 <---

//获取覆盖物位置
const attribute = (e) => {
  var p = e.target;
  console.log("marker的位置是" + p.getLngLat().lng + "," + p.getLngLat().lat);
};

const eventParams = () => {
  const json_data = [
    [116.404, 39.915],
    [116.383752, 39.91334],
    [116.384502, 39.932241],
  ];
  const pointArray = new Array();
  for (var i = 0; i < json_data.length; i++) {
    var marker = new T.Marker(new T.LngLat(json_data[i][0], json_data[i][1])); // 创建点
    map.addOverLay(marker); //增加点
    pointArray[i] = new T.LngLat(json_data[i][0], json_data[i][1]);
    marker.addEventListener("click", attribute);
  }
  //让所有点在视野范围内
  map.setViewport(pointArray);
};

// ---> E 传递事件参数 <---

// ---> S 地图拾取器 <---
const getLngLat = (lnglat) => {
  console.log(lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6));
};
const mapPicker = () => {
  var cp = new T.CoordinatePickup(map, { callback: getLngLat });
  cp.addEvent();
};
// ---> E 地图拾取器 <---

const polymerizationMarker = () => {
  var arrayObj = new Array();
  for (var i = 0; i < 500; i++) {
    var marker = new T.Marker(
      new T.LngLat(Math.random() * 40 + 85, Math.random() * 30 + 21),
      { title: i }
    );
    arrayObj.push(marker);
  }
  var markers = new T.MarkerClusterer(map, { markers: arrayObj });
};

// ---> S 关键字本地搜索 <---
let localsearch = null;

const localSearchResult = (result) => {
  console.log("搜索结果", result);
  console.log("搜索结果", result.getPois());
  console.log("搜索建议", result.getSuggests());

  const poisList = result.getPois() || [];
  poisList.forEach((element) => {
    const { address = "", name = "", lonlat = "" } = element || {};
    console.log("===============");
    console.log("name", name);
    console.log("address", address);
    console.log("lonlat", lonlat);
    console.log("===============");
  });

  //   {
  //     "address": "北京市东城区",
  //     "phone": "",
  //     "poiType": "101",
  //     "name": "天安门东",
  //     "source": "0",
  //     "hotPointID": "81B0610081E1FB28",
  //     "lonlat": "116.395032,39.906343"
  // }
};

const addSearch = () => {
  var config = {
    pageCapacity: 10, //每页显示的数量
    onSearchComplete: localSearchResult, //接收数据的回调函数
  };
  //创建搜索对象
  localsearch = new T.LocalSearch(map, config);
};

const searchValue = ref("");

const search = () => {
  localsearch.search(searchValue.value);
  console.log("search", searchValue.value);
};

const pageInfo = ref("");
const getPageInfo = () => {
  pageInfo.value =
    "共" +
    localsearch.getCountNumber() +
    "条记录，分" +
    localsearch.getCountPage() +
    "页,当前第" +
    localsearch.getPageIndex() +
    "页";
};
// ---> E 关键字本地搜索 <---

// ---> S 逆地理编码 <---

const searchResult = (result) => {
  if (result.getStatus() == 0) {
    console.log("逆地理编码成功");
    console.log("详细地址", result.getAddress());

    const addressComponent = result.getAddressComponent();
    console.log("此点最近地点信息", addressComponent.address);
    console.log("此点距离最近地点信息距离", addressComponent.address_distance);
    console.log("此点在最近地点信息方向", addressComponent.address_position);
    console.log("此点所在国家或城市或区县", addressComponent.city);
    console.log("距离此点最近poi点", addressComponent.poi);
    console.log("距离此点最近poi点的距离", addressComponent.poi_distance);
    console.log("此点在最近poi点的方向", addressComponent.poi_position);
    console.log("距离此点最近的路", addressComponent.road);
    console.log("此点距离此路的距离", addressComponent.road_distance);
  } else {
    console.log("服务器返回状态", result.getStatus());
    console.log("服务器返回响应信息", result.getMsg());
  }
};

const reverseGeocoding = () => {
  //创建对象
  const geocode = new T.Geocoder();

  map.addEventListener("click", function (e) {
    geocode.getLocation(e.lnglat, searchResult);
  });
};

// ---> E 逆地理编码 <---

// ---> S 地理编码 <---
const geocodingValue = ref("北京市海淀区莲花池西路28号");

let geocoder = null;
const geocoding = () => {
  geocoder = new T.Geocoder();
};
const searchGeocoding = () => {
  geocoder.getPoint(geocodingValue.value, (result) => {
    //     {
    //     "score": 100,
    //     "level": "门址",
    //     "lon": "116.290158",
    //     "lat": "39.894696",
    //     "keyWord": "北京市海淀区莲花池西路28号"
    // }

    console.log("searchGeocoding", result);
    if (result.getStatus() == 0) {
      map.panTo(result.getLocationPoint(), 16);
      //创建标注对象
      var marker = new T.Marker(result.getLocationPoint());
      //向地图上添加标注
      map.addOverLay(marker);
    } else {
      console.log(result.getMsg());
    }
  });
};
// ---> E 地理编码 <---

// ---> S 定位 <---
let lc = new T.LocalCity();

const getLoclByIp = () => {
  console.log("getLoclByIp");
  lc.location(function (e) {
    console.log("getLoclByIp", e);
    var marker = new T.Marker(e.lnglat);
    map.addOverLay(marker);
  });
};
let lo = new T.Geolocation();

const getLoclByH5 = () => {
  lo.getCurrentPosition((e) => {
    if (e.getStatus() == 0) {
      map.centerAndZoom(e.lnglat, 15);
      alert("获取定位坐标：" + e.lnglat.lat + "," + e.lnglat.lng);
      var marker = new T.Marker(e.lnglat);
      map.addOverLay(marker);
    }
    if (e.getStatus() == 1) {
      map.centerAndZoom(e.lnglat, e.level);
      alert("获取定位坐标：" + e.lnglat.lat + "," + e.lnglat.lng);
      var marker = new T.Marker(e.lnglat);
      map.addOverLay(marker);
    }
  });
};

// ---> E 定位 <---

// ---> S 加载波纹动画 <---

// 添加自定义动画点位
const addPoint = (item) => {
  // 添加点击效果
  var definedOverlay = T.Overlay.extend({
    initialize: function (lnglat) {
      // 构造函数时传递参数，对OverlayOptions属性值进行赋值。
      console.log("initialize", lnglat);
      this.lnglat = lnglat;
    },
    onAdd: function () {
      // 向地图上添加叠加物。当调用map.addOverLay时
      var div = (this._div = document.createElement("div"));
      div.classList.add("circle-marker-content");
      var div1 = (this._div1 = document.createElement("div"));
      div1.classList.add("item");
      div1.classList.add("item1");
      div.appendChild(div1);
      var div2 = (this._div2 = document.createElement("div"));
      div2.classList.add("item");
      div2.classList.add("item2");
      div.appendChild(div2);
      var div3 = (this._div3 = document.createElement("div"));
      div3.classList.add("item");
      div3.classList.add("item3");
      div.appendChild(div3);
      var div4 = (this._div4 = document.createElement("div"));
      div4.classList.add("item");
      div4.classList.add("item4");
      div.appendChild(div4);
      var div5 = (this._div5 = document.createElement("div"));
      div5.classList.add("item");
      div5.classList.add("item5");
      div.appendChild(div5);
      map.getPanes().overlayPane.appendChild(this._div);
      this.update(this.lnglat);
    },
    onRemove: function () {
      console.log("onRemove");
      var parent = this._div.parentNode;
      if (parent) {
        parent.removeChild(this._div);
        this._div = null;
      }
    },
    update: function () {
      // 当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法。
      // 将地理坐标转化为地图图层上点的像素坐标，相对于地图图层左上角，参数是LngLat，返回值是Point。
      var pos = map.lngLatToLayerPoint(this.lnglat);
      this._div.style.top = pos.y + "px";
      this._div.style.left = pos.x + "px";
    },
  });
  // 添加标注/覆盖物
  var point = new T.LngLat(item.longitude, item.latitude);
  console.log(item.longitude, item.latitude);
  const pdefinedOverlay = new definedOverlay(point);
  map.addOverLay(pdefinedOverlay);
  return pdefinedOverlay;
};

let curPdefinedOverlay = null;
const addRenderPoint = () => {
  curPdefinedOverlay = addPoint({ longitude: 116.400244, latitude: 39.92556 });
};

const removeRenderPoint = () => {
  map.removeOverLay(curPdefinedOverlay);
};

// ---> E 加载波纹动画 <---

// ---> S 新增颜色图标  <---

const sanitizeSVGContent = (svgString) => {
  return svgString.replace(/<script.*?>.*?<\/script>/gi, "");
};

const svgColor = ref("#ff0000");
// 修改后的addPoint函数（支持传颜色参数）
const addColorPoint = (item, color = "#ff0000") => {
  var definedOverlay = T.Overlay.extend({
    initialize: function (lnglat, color) {
      this.lnglat = lnglat;
      this.color = color; // 存储颜色
      this.setOptions({ type: 1, title: "6666" });
      console.log("Overlay initialized with options:", this.options);
    },

    onAdd: function () {
      // 创建SVG元素
      //       this._svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      //       // this._svg.setAttribute("width", "30");
      //       // this._svg.setAttribute("height", "30");
      //       this._svg.style.position = "absolute";

      //       // 创建路径（示例为定位图标）
      // // <svg t="1755852471313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2278" width="200" height="200"><path d="M806.826667 256h-162.986667c-25.6 0-46.506667 19.2-46.506667 42.666667v597.333333h256V298.666667c0-23.466667-20.906667-42.666667-46.506666-42.666667z m3.84 170.666667h-170.666667V384h170.666667v42.666667zM271.36 564.138667l-8.490667-17.792-38.485333 118.656c-3.114667 8.106667-7.210667 15.786667-12.373333 22.613333l-77.098667 114.346667a46.805333 46.805333 0 0 0-5.418667 36.266666c2.773333 12.672 10.24 23.594667 20.821334 30.293334 8.362667 6.058667 18.346667 9.301333 28.544 9.301333 3.456 0.426667 6.912 0.426667 10.410666 0 12.8-2.773333 23.808-11.178667 30.378667-22.997333l72.832-113.066667c8.874667-14.72 16.554667-30.293333 22.784-46.378667l21.12-61.738666-5.76-3.285334a162.645333 162.645333 0 0 1-59.306667-66.218666h0.042667z m139.52-297.557334c47.786667 0.426667 86.912-39.594667 87.509333-89.6 0-50.56-39.210667-91.648-87.466666-91.648-48.298667 0-87.466667 41.088-87.466667 91.648 0.597333 50.005333 39.68 90.026667 87.466667 89.6H410.88z" fill="#ffffff" p-id="2279"></path><path d="M492.629333 660.650667l-67.498666-128.853334-2.304-3.968-6.570667-10.069333 4.992-26.24 21.589333-91.306667c12.629333-58.581333-21.504-117.077333-77.098666-131.968a83.925333 83.925333 0 0 0-26.24-4.48 57.386667 57.386667 0 0 0-46.592 14.549334L205.781333 365.098667c-4.864 5.802667-8.96 12.117333-12.373333 19.029333l-50.133333 110.634667a42.069333 42.069333 0 0 0-1.706667 32.512c3.84 10.624 11.776 18.986667 21.76 23.168a42.538667 42.538667 0 0 0 56.618667-18.517334L270.933333 419.968l14.677334-14.506667-12.714667 57.728c-12.714667 49.28-6.613333 121.088 92.885333 177.237334l3.114667 2.048 29.696 56.149333a931.413333 931.413333 0 0 1 31.146667 156.202667c1.706667 13.056 8.704 24.704 19.285333 31.872 8.618667 6.058667 18.858667 9.301333 29.226667 9.301333h6.144c12.544-1.493333 24.106667-7.808 32.384-17.792a52.48 52.48 0 0 0 10.026666-40.32l-18.858666-136.448a160.213333 160.213333 0 0 0-15.36-40.789333h0.042666z" fill="#ffffff" p-id="2280"></path><path d="M550.4 487.04a39.68 39.68 0 0 0-19.285333-23.381333l-77.098667-40.32-19.968 85.589333 59.392 33.066667a37.12 37.12 0 0 0 19.626667 6.058666 44.373333 44.373333 0 0 0 33.28-20.48 49.066667 49.066667 0 0 0 5.333333-40.106666l-1.28-0.426667z" fill="#ffffff" p-id="2281"></path></svg>

      //       const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
      //       path.setAttribute(
      //         "d",
      //         "M492.629333 660.650667l-67.498666-128.853334-2.304-3.968-6.570667-10.069333 4.992-26.24 21.589333-91.306667c12.629333-58.581333-21.504-117.077333-77.098666-131.968a83.925333 83.925333 0 0 0-26.24-4.48 57.386667 57.386667 0 0 0-46.592 14.549334L205.781333 365.098667c-4.864 5.802667-8.96 12.117333-12.373333 19.029333l-50.133333 110.634667a42.069333 42.069333 0 0 0-1.706667 32.512c3.84 10.624 11.776 18.986667 21.76 23.168a42.538667 42.538667 0 0 0 56.618667-18.517334L270.933333 419.968l14.677334-14.506667-12.714667 57.728c-12.714667 49.28-6.613333 121.088 92.885333 177.237334l3.114667 2.048 29.696 56.149333a931.413333 931.413333 0 0 1 31.146667 156.202667c1.706667 13.056 8.704 24.704 19.285333 31.872 8.618667 6.058667 18.858667 9.301333 29.226667 9.301333h6.144c12.544-1.493333 24.106667-7.808 32.384-17.792a52.48 52.48 0 0 0 10.026666-40.32l-18.858666-136.448a160.213333 160.213333 0 0 0-15.36-40.789333h0.042666z"
      //       );
      //       path.setAttribute("fill", this.color); // 使用初始颜色
      //       this._svg.appendChild(path);

      this._svg = document.createElement("div");
      this._svg.className = "svg-this._svg";
      this._svg.style.display = "inline-block";
      this._svg.style.backgroundColor = "red";

      const staticSVG = `
      <svg t="1756281119566" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3514" width="40" height="200"><path d="M664.255669 235.685318h-78.580993c-12.341664 0-22.422376 9.25726-22.422376 20.571126V544.247149h123.424733V256.256444c0-11.313866-10.0797-20.571126-22.422376-20.571126z m1.85125 82.283492h-82.283493v-20.571126h82.283493v20.571126z m-260.014582 66.278782l-4.093993-8.578468-18.554983 57.207659a44.510919 44.510919 0 0 1-5.96851 10.90214l-37.171676 55.132844a22.566024 22.566024 0 0 0-2.612993 17.484698 23.003041 23.003041 0 0 0 10.038224 14.605651 23.457254 23.457254 0 0 0 13.75792 4.484475 20.486151 20.486151 0 0 0 5.019618 0 22.25546 22.25546 0 0 0 14.646116-11.087265l35.114057-54.512725a144.440968 144.440968 0 0 0 10.985093-22.356621l10.182884-29.765666-2.776874-1.584184a78.415089 78.415089 0 0 1-28.584103-31.932538h0.020232z m67.266115-143.460716c23.039459 0.202322 41.902984-19.090126 42.190282-43.195824 0-24.379844-18.905001-44.186192-42.170049-44.186192-23.286292 0-42.17005 19.809382-42.17005 44.186192 0.288309 24.108732 19.130591 43.404216 42.17005 43.195824z" fill="#2A81CB" p-id="3515"></path><path d="M512.77186 430.7787l-32.54254-62.123081-1.112773-1.912958-3.168368-4.855736 2.406624-12.651217 10.408474-44.0213c6.088891-28.24319-10.368009-56.447939-37.171676-63.630382a40.464472 40.464472 0 0 0-12.651217-2.159791 27.667583 27.667583 0 0 0-22.458794 7.019574l-42.005156 41.841276a45.635832 45.635832 0 0 0-5.96851 9.174307l-24.170441 53.340267a20.282817 20.282817 0 0 0-0.82244 15.674925 19.065848 19.065848 0 0 0 10.491426 11.170218 20.509418 20.509418 0 0 0 27.297333-8.927474l24.582166-53.977583 7.081283-6.994284-6.130367 27.832476c-6.130368 23.758715-3.1886 58.380117 44.782031 85.450848l1.501232 0.987334 14.317342 27.070731a449.064595 449.064595 0 0 1 15.016365 75.309441 21.918593 21.918593 0 0 0 9.297724 15.366383A24.551818 24.551818 0 0 0 505.842319 544.247149h2.961999a23.96306 23.96306 0 0 0 15.613217-8.578468 25.302434 25.302434 0 0 0 4.834493-19.439132l-9.092367-65.785116a77.242631 77.242631 0 0 0-7.404999-19.665733h0.020233z" fill="#2A81CB" p-id="3516"></path><path d="M540.624568 347.07794a19.130591 19.130591 0 0 0-9.297725-11.272391l-37.171675-19.439132-9.62751 41.264657 28.634684 15.94199a17.896424 17.896424 0 0 0 9.462617 2.921535 21.393566 21.393566 0 0 0 16.045175-9.874343 23.656542 23.656542 0 0 0 2.571517-19.336959l-0.617083-0.202323z" fill="#2A81CB" p-id="3517"></path><path d="M281.287766 915.794967c33.170751 52.806136 130.454423 87.758335 246.294091 87.758335 11.169206 0 20.312153 4.571474 20.402186 10.223349 0.090033 5.62962-9.052914 10.223349-20.402186 10.223349-134.215596 0-246.091768-39.857505-282.84666-100.121243-2.927605-5.179452 2.882082-11.192473 12.926375-13.422066 9.998771-2.251848 20.559998 0.157811 23.623159 5.337264zM511.998988 0c199.003262 0 360.309822 166.170389 360.309822 371.118894 0 129.260721-103.296693 259.040399-199.273362 351.707075a22.066288 22.066288 0 0 1 6.147565 1.68838c72.827957 30.941159 126.424162 80.303768 139.845215 133.945496 12.926376 51.614457-20.605521 99.333198-92.056674 130.522201-8.194056 3.467805-20.920132 2.702015-28.32513-1.756158-7.363522-4.459185-6.643255-10.87685 1.508313-14.344656 62.559085-27.361064 92.824487-69.156818 82.893494-114.420376-10.31844-47.020728-56.365998-90.280284-120.482965-117.415758a16.123069 16.123069 0 0 1-5.111675-3.400028q-10.16771 9.457559-20.042053 18.330406c56.523809 21.911512 98.11724 59.631481 106.066486 102.463125 12.543986 67.738538-84.109452 122.640734-215.893133 122.640733s-228.439142-54.903207-215.8729-122.641745c6.913355-37.314313 39.341583-70.711665 84.897497-93.207888q-10.186931-8.884986-20.176597-17.992527c-54.699873 26.640797-94.513879 66.564057-104.309316 111.200415-1.238213 5.62962-10.358905 10.201093-20.379932 10.201094s-17.00216-4.571474-15.578821-10.201094c12.836342-51.344357 59.608214-97.215894 122.595211-127.594596C260.688315 638.040761 151.694225 504.8388 151.694225 371.141149 151.689166 166.170389 312.995726 0 511.998988 0z m95.144114 782.279406l-1.733903 1.463803c-53.370615 44.969179-93.410211 71.992365-93.410211 71.992365s-35.738222-23.961037-84.71743-64.383021c-32.224894 16.438692-54.38425 40.421984-58.009867 67.107292-6.755544 49.654965 64.136188 89.92015 158.311177 89.92015 94.198256 0 165.066721-40.26215 158.311178-89.92015-4.369151-32.09035-35.490377-60.261715-78.749933-76.182462zM511.998988 67.558471c-161.688949 0-292.751351 131.062402-292.751351 292.751351s131.062402 292.751351 292.751351 292.751351 292.751351-131.062402 292.751351-292.751351c0-159.369323-127.346752-288.99119-285.837996-292.659294z" fill="#2A81CB" p-id="3518"></path></svg>
      `;
      this._svg.style.position = "absolute";
      this._svg.innerHTML = sanitizeSVGContent(staticSVG);

      map.getPanes().overlayPane.appendChild(this._svg);
      this.update(this.lnglat);
    },

    update: function () {
      const pos = map.lngLatToLayerPoint(this.lnglat);
      this._svg.style.left = pos.x + "px"; // 居中定位
      this._svg.style.top = pos.y + "px";
    },

    onRemove: function () {
      this._svg.parentNode.removeChild(this._svg);
    },

    setLnglat: function (lnglat) {
      this.lnglat = lnglat;
      this.update();
    },
    getLnglat: function () {
      return this.lnglat;
    },
    setPos: function (pos) {
      this.lnglat = map.layerPointToLngLat(pos);
      this.update();
    },
    // 新增颜色修改方法
    setColor: function (newColor) {
      this.color = newColor;

      const paths = this._svg.querySelectorAll("path");
      for (let i = 0; i < paths.length; i++) {
        paths[i].setAttribute("fill", newColor);
      }

      // this._svg.querySelectorAll("path").setAttribute("fill", newColor);
    },
    addEvent: function (type, fn) {
      this._svg.addEventListener(type, fn);
    },
    removeEvent: function (type, fn) {
      this._svg.removeEventListener(type, fn);
    },
  });

  const point = new T.LngLat(item.longitude, item.latitude);
  const overlay = new definedOverlay(point, color);
  map.addOverLay(overlay);
  return overlay;
};

// 新增颜色修改方法
const changeSvgColor = () => {
  if (curPdefinedOverlay) {
    curPdefinedOverlay.setColor("red");
  }
};

const addRenderColorPoint = () => {
  curPdefinedOverlay = addColorPoint(
    { longitude: 116.500244, latitude: 39.93556 },
    "blue"
  );
};

// ---> E 新增颜色图标  <---

// ---> S 新增测试的marker <---
const addTestMarker = () => {
  const definedOverlay = T.Overlay.extend({
    initialize: function (
      lnglat,
      { width = 0, height = 0, color = "", icon = "", title = "" } = {},
      options = {}
    ) {
      this._type = "marker";
      this.lnglat = lnglat;
      this.setOptions(options);
      this._width = width || 40;
      this._height = height || 60;
      this._svg = null;
      this._div = null;
      this._icon = icon;
      this._color = color;
      this._title = title || "默认提示信息";
      this.setOptions({ type: 1 });
    },

    onAdd: function (map) {
      this.map = map;
      const div = (this._div = document.createElement("div"));
      div.style.position = "absolute";
      this._div.style.cursor = "pointer";
      const staticSVG = this._icon;
      this._div.innerHTML = sanitizeSVGContent(staticSVG);

      this._div.classList.add("tooltip-direction");
      // this._div.setAttribute("data-tooltip-bsgoal", this._title);

      map.getPanes().overlayPane.appendChild(this._div);
      this.setSvgSize(this._width, this._height);
      this.update(this.lnglat);

      const mouseEvent = (e) => {
        console.log("mouseEvent", e);

        const overlays = map.getOverlays();
        overlays.forEach((overlay) => {
          if (overlay._type === "tooltip") {
            if (e.type === "mouseenter") {
              overlay.open(this.lnglat, this._title);
            } else if (e.type === "mouseleave") {
              overlay.close();
            }
          }
        });
      };

      this._div.addEventListener("mouseenter", mouseEvent);
      this._div.addEventListener("mouseleave", mouseEvent);
    },

    onRemove: function () {
      const parent = this.div.parentNode;
      if (parent) {
        parent.removeChild(this.div);
        this.map = null;
        this.div = null;
      }
    },

    setLnglat: function (lnglat) {
      this.lnglat = lnglat;
      this.update();
    },
    getLnglat: function () {
      return this.lnglat;
    },
    setPos: function (pos) {
      this.lnglat = this.map.layerPointToLngLat(pos);
      this.update();
    },
    setSvgSize: function (width = 40, height = 60) {
      this._width = width;
      this._height = height;
      this._div.style.width = width + "px";
      this._svg = this._div.querySelector("svg");
      this._svg.style.width = width + "px";
      this._svg.style.height = height + "px";
    },

    setColor: function (newColor) {
      this.color = newColor;

      const paths = this._svg.querySelectorAll("path");
      for (let i = 0; i < paths.length; i++) {
        paths[i].setAttribute("fill", newColor);
      }
    },

    addEvent: function (type, fn) {
      if (!this._eventListeners) {
        this._eventListeners = {};
      }
      if (!this._eventListeners[type]) {
        this._eventListeners[type] = [];
      }

      const fn2 = () => {
        fn(this);
      };

      this._eventListeners[type].push({ original: fn, wrapper: fn2 });

      this._div.addEventListener(type, fn2);
    },

    removeEvent: function (type) {
      console.log("移除掉相关事件");
      if (this._eventListeners && this._eventListeners[type]) {
        this._eventListeners[type].forEach((listener) => {
          this._div.removeEventListener(type, listener.wrapper);
        });
        delete this._eventListeners[type];
      }
    },

    /**
     * 更新位置
     */
    update: function () {
      const pos = this.map.lngLatToLayerPoint(this.lnglat);
      const xOffset = this._width / 2;
      const yOffset = Math.floor(this._height * 0.8);
      this._div.style.left = pos.x - xOffset + "px";
      this._div.style.top = pos.y - yOffset + "px";
    },
  });

  const point = new T.LngLat(116.40438, 39.87877);
  curPdefinedOverlay = new definedOverlay(point, {
    title: "智慧通道设备",
    icon: ` <svg t="1756281119566" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3514"  ><path d="M664.255669 235.685318h-78.580993c-12.341664 0-22.422376 9.25726-22.422376 20.571126V544.247149h123.424733V256.256444c0-11.313866-10.0797-20.571126-22.422376-20.571126z m1.85125 82.283492h-82.283493v-20.571126h82.283493v20.571126z m-260.014582 66.278782l-4.093993-8.578468-18.554983 57.207659a44.510919 44.510919 0 0 1-5.96851 10.90214l-37.171676 55.132844a22.566024 22.566024 0 0 0-2.612993 17.484698 23.003041 23.003041 0 0 0 10.038224 14.605651 23.457254 23.457254 0 0 0 13.75792 4.484475 20.486151 20.486151 0 0 0 5.019618 0 22.25546 22.25546 0 0 0 14.646116-11.087265l35.114057-54.512725a144.440968 144.440968 0 0 0 10.985093-22.356621l10.182884-29.765666-2.776874-1.584184a78.415089 78.415089 0 0 1-28.584103-31.932538h0.020232z m67.266115-143.460716c23.039459 0.202322 41.902984-19.090126 42.190282-43.195824 0-24.379844-18.905001-44.186192-42.170049-44.186192-23.286292 0-42.17005 19.809382-42.17005 44.186192 0.288309 24.108732 19.130591 43.404216 42.17005 43.195824z" fill="#2A81CB" p-id="3515"></path><path d="M512.77186 430.7787l-32.54254-62.123081-1.112773-1.912958-3.168368-4.855736 2.406624-12.651217 10.408474-44.0213c6.088891-28.24319-10.368009-56.447939-37.171676-63.630382a40.464472 40.464472 0 0 0-12.651217-2.159791 27.667583 27.667583 0 0 0-22.458794 7.019574l-42.005156 41.841276a45.635832 45.635832 0 0 0-5.96851 9.174307l-24.170441 53.340267a20.282817 20.282817 0 0 0-0.82244 15.674925 19.065848 19.065848 0 0 0 10.491426 11.170218 20.509418 20.509418 0 0 0 27.297333-8.927474l24.582166-53.977583 7.081283-6.994284-6.130367 27.832476c-6.130368 23.758715-3.1886 58.380117 44.782031 85.450848l1.501232 0.987334 14.317342 27.070731a449.064595 449.064595 0 0 1 15.016365 75.309441 21.918593 21.918593 0 0 0 9.297724 15.366383A24.551818 24.551818 0 0 0 505.842319 544.247149h2.961999a23.96306 23.96306 0 0 0 15.613217-8.578468 25.302434 25.302434 0 0 0 4.834493-19.439132l-9.092367-65.785116a77.242631 77.242631 0 0 0-7.404999-19.665733h0.020233z" fill="#2A81CB" p-id="3516"></path><path d="M540.624568 347.07794a19.130591 19.130591 0 0 0-9.297725-11.272391l-37.171675-19.439132-9.62751 41.264657 28.634684 15.94199a17.896424 17.896424 0 0 0 9.462617 2.921535 21.393566 21.393566 0 0 0 16.045175-9.874343 23.656542 23.656542 0 0 0 2.571517-19.336959l-0.617083-0.202323z" fill="#2A81CB" p-id="3517"></path><path d="M281.287766 915.794967c33.170751 52.806136 130.454423 87.758335 246.294091 87.758335 11.169206 0 20.312153 4.571474 20.402186 10.223349 0.090033 5.62962-9.052914 10.223349-20.402186 10.223349-134.215596 0-246.091768-39.857505-282.84666-100.121243-2.927605-5.179452 2.882082-11.192473 12.926375-13.422066 9.998771-2.251848 20.559998 0.157811 23.623159 5.337264zM511.998988 0c199.003262 0 360.309822 166.170389 360.309822 371.118894 0 129.260721-103.296693 259.040399-199.273362 351.707075a22.066288 22.066288 0 0 1 6.147565 1.68838c72.827957 30.941159 126.424162 80.303768 139.845215 133.945496 12.926376 51.614457-20.605521 99.333198-92.056674 130.522201-8.194056 3.467805-20.920132 2.702015-28.32513-1.756158-7.363522-4.459185-6.643255-10.87685 1.508313-14.344656 62.559085-27.361064 92.824487-69.156818 82.893494-114.420376-10.31844-47.020728-56.365998-90.280284-120.482965-117.415758a16.123069 16.123069 0 0 1-5.111675-3.400028q-10.16771 9.457559-20.042053 18.330406c56.523809 21.911512 98.11724 59.631481 106.066486 102.463125 12.543986 67.738538-84.109452 122.640734-215.893133 122.640733s-228.439142-54.903207-215.8729-122.641745c6.913355-37.314313 39.341583-70.711665 84.897497-93.207888q-10.186931-8.884986-20.176597-17.992527c-54.699873 26.640797-94.513879 66.564057-104.309316 111.200415-1.238213 5.62962-10.358905 10.201093-20.379932 10.201094s-17.00216-4.571474-15.578821-10.201094c12.836342-51.344357 59.608214-97.215894 122.595211-127.594596C260.688315 638.040761 151.694225 504.8388 151.694225 371.141149 151.689166 166.170389 312.995726 0 511.998988 0z m95.144114 782.279406l-1.733903 1.463803c-53.370615 44.969179-93.410211 71.992365-93.410211 71.992365s-35.738222-23.961037-84.71743-64.383021c-32.224894 16.438692-54.38425 40.421984-58.009867 67.107292-6.755544 49.654965 64.136188 89.92015 158.311177 89.92015 94.198256 0 165.066721-40.26215 158.311178-89.92015-4.369151-32.09035-35.490377-60.261715-78.749933-76.182462zM511.998988 67.558471c-161.688949 0-292.751351 131.062402-292.751351 292.751351s131.062402 292.751351 292.751351 292.751351 292.751351-131.062402 292.751351-292.751351c0-159.369323-127.346752-288.99119-285.837996-292.659294z" fill="#2A81CB" p-id="3518"></path></svg>`,
  });

  curPdefinedOverlay.extData = { name: "自定义覆盖物" };

  // map.addOverLay(new T.Marker(point, {}));
  map.addOverLay(curPdefinedOverlay);
  curPdefinedOverlay.addEvent("click", (e) => {
    console.log("自定义覆盖物被点击", e);
  });
};
setTimeout(() => {
  addTestMarker();
  addTipsMarke();
}, 1000);
const addTipsMarke = () => {
  const definedOverlay = T.Overlay.extend({
    initialize: function (
      lnglat,
      { width = 0, height = 0, color = "", icon = "", title = "" } = {},
      options = {}
    ) {
      this._type = "tooltip";
      this.lnglat = lnglat;
      this.setOptions(options);
      this._width = width || 40;
      this._height = height || 60;
      this._svg = null;
      this._div = null;
      this._icon = icon;
      this._color = color;
      this._title = title || "默认提示信息";
      this.setOptions({ type: 1 });
    },

    onAdd: function (map) {
      this.map = map;
      const div = (this._div = document.createElement("div"));
      div.style.position = "absolute";
      this._div.style.cursor = "pointer";
      this._div.classList.add("bsgoal_marker_tooltip");
      this._div.innerHTML = `愚蠢的地球人`;
      map.getPanes().overlayPane.appendChild(this._div);
      this.update(this.lnglat);
    },

    onRemove: function () {
      const parent = this.div.parentNode;
      if (parent) {
        parent.removeChild(this.div);
        this.map = null;
        this.div = null;
      }
    },
    setLnglat: function (lnglat) {
      this.lnglat = lnglat;
      this.update();
    },
    getLnglat: function () {
      return this.lnglat;
    },
    setPos: function (pos) {
      this.lnglat = this.map.layerPointToLngLat(pos);
      this.update();
    },
    addEvent: function (type, fn) {
      if (!this._eventListeners) {
        this._eventListeners = {};
      }
      if (!this._eventListeners[type]) {
        this._eventListeners[type] = [];
      }

      const fn2 = () => {
        fn(this);
      };

      this._eventListeners[type].push({ original: fn, wrapper: fn2 });

      this._div.addEventListener(type, fn2);
    },

    removeEvent: function (type) {
      console.log("移除掉相关事件");
      if (this._eventListeners && this._eventListeners[type]) {
        this._eventListeners[type].forEach((listener) => {
          this._div.removeEventListener(type, listener.wrapper);
        });
        delete this._eventListeners[type];
      }
    },

    /**
     * 更新位置
     */
    update: function () {
      const pos = this.map.lngLatToLayerPoint(this.lnglat);
      this._div.style.left = pos.x + 15 + "px";
      this._div.style.top = pos.y - 60 + "px";
    },
    close: function () {
      this._div.style.display = "none";
    },
    open: function (lnglat = null, content = "") {
      this.setLnglat(lnglat);
      this._div.innerHTML = content;
      this._div.style.display = "block";
    },
  });

  const point = new T.LngLat(117.4, 40.8);
  const tipMarker = new definedOverlay(point, {});
  map.addOverLay(tipMarker);
};
const removeEvent = () => {
  curPdefinedOverlay.removeEvent("click");
};
// ---> E 新增测试的marker <---
</script>

<template>
  <button @click="getLocation">获取本地位置</button>
  <button @click="zoomIn">放大</button>
  <button @click="zommOut">缩小</button>
  <button @click="panTo">平移</button>
  <button @click="setZoom">缩放</button>
  <button @click="enableDrag">拖拽</button>
  <button @click="obtainTheVisibleArea">获取可视区域</button>
  <button @click="centerAndZoom">设置地图中心点、缩放级别</button>
  <button @click="map.enableDoubleClickZoom()">允许双击地图放大</button>
  <button @click="map.disableDoubleClickZoom()">禁止双击地图放大</button>
  <button @click="map.enableScrollWheelZoom()">允许鼠标滚轮缩放地图</button>
  <button @click="map.disableScrollWheelZoom()">禁止鼠标滚轮缩放地图</button>

  <!-- 地图会自动的向鼠标拖拽的方向移动一段距离。 -->

  <button @click="map.enableInertia()">允许鼠标地图惯性拖拽</button>
  <button @click="map.disableInertia()">禁止鼠标地图惯性拖拽</button>

  <!-- 滚动鼠标滑轮，地图将进行缩放操作；

小键盘上的四个方向键，地图将向相应的方向移动一段距离；

敲击大小键盘上的+、-两个键，地图将放大或缩小 -->
  <button @click="map.enableKeyboard()">允许键盘操作地图</button>
  <button @click="map.disableKeyboard()">禁止键盘操作地图</button>

  <button @click="setZoomLevels([1, 18])">设置地图显示级别范围</button>

  <!-- 置地图的显示范围，当前坐标范围为北京五环，设置完成后，地图的显示范围超过当前北京五环坐标时，地图会禁止拖动。 -->
  <button @click="setMapRange">设置地图显示范围</button>
  <button @click="resetMapRange">重置地图显示范围</button>

  <!-- 设置地图样式。 -->
  <button @click="map.setStyle('black')">block</button>
  <button @click="map.setStyle('indigo')">indigo</button>
  <button @click="map.removeStyle()">removeStyle</button>
  <!-- 获取地图中心点坐标。 -->

  <button @click="getMapCenter()">获取地图中心点坐标</button>
  <!-- 获取地图当前缩放级别 -->

  <button @click="getMapZoom()">获取地图当前缩放级别</button>
  <!-- 获取地图当前可视范围坐标 -->

  <button @click="getMapBounds()">获取地图当前可视范围坐标</button>

  <div>
    <!-- 添加标注 -->
    <button @click="addMarker">添加标注</button>
    <!-- 添加图片 -->
    <button @click="addImage">添加图片</button>
    <!-- 移除覆盖物 -->
    <button @click="clearOverLays">移除覆盖物</button>
    <!-- 拖拽 -->
    <button @click="enableDragging">可拖拽</button>
    <button @click="disableDragging">不可拖拽</button>
    <!-- 显示/隐藏 -->
    <button @click="showOver">显示</button>
    <button @click="hideOver">隐藏</button>
    <!-- 标注添加文字 -->
    <button @click="addLabel">标注添加文字</button>
    <!-- 添加多个点的标注 -->
    <button @click="addMarkers">添加多个点的标注</button>
    <!-- 自定义覆盖物 -->
    <button @click="addDefinedOverlay">自定义覆盖物</button>
    <!-- 新增图片覆盖物 -->
    <button @click="addImgOverLay">新增图片覆盖物</button>
  </div>

  <div>
    <!-- 点击事件 -->
    <button @click="addMapClick">点击事件注册</button>
    <button @click="removeMapClick">点击事件移除</button>
    <!-- 拖拽地图后获取中心点经纬度 -->

    <button @click="addMapMoveend">移动地图注册</button>
    <button @click="removeMapMoveend">移动地图移除</button>
    <!-- 地图划过获取事件 -->

    <button @click="addMapMousemove">注册鼠标滑动事件{{ mouseLngLat }}</button>
    <button @click="removeMapMousemove">移除鼠标滑动事件</button>
    <!-- 标注点击事件 -->

    <button @click="addMarkerClick">注册标注点击事件{{ markLngLat }}</button>
    <button @click="removeMarkerClick">移除标注点击事件</button>

    <!-- 传递事件参数 -->
    <button @click="eventParams">事件传递</button>
  </div>

  <div>
    <!-- 地图拾取器 -->
    <button @click="mapPicker">地图拾取器</button>
    <!-- 聚合marker -->
    <button @click="polymerizationMarker">聚合marker</button>
  </div>

  <div>
    <!-- 关键字本地搜索 -->
    <button @click="addSearch">新增本地搜索</button>

    <input v-model="searchValue" type="text" />
    <button @click="search">搜索</button>
    <button @click="localsearch.firstPage()">第一页</button>
    <button @click="localsearch.previousPage()">上一页</button>
    <button @click="localsearch.nextPage()">下一页</button>
    <button @click="localsearch.lastPage()">最后一页</button>
    <button @click="localsearch.gotoPage(1)">跳转到那一页</button>
    <button @click="getPageInfo">获取分页信息{{ pageInfo }}</button>
    <!-- 地理编码 -->
    <button @click="reverseGeocoding">逆地理编码</button>
    <button @click="geocoding">地理编码</button>
    <input v-model="geocodingValue" type="text" />
    <button @click="searchGeocoding">搜索</button>
  </div>

  <div>
    <button @click="getLoclByIp">ip地址定位</button>
    <button @click="getLoclByH5">H5定位</button>
  </div>

  <div>
    <button @click="addRenderPoint">新增渲染点</button>
    <button @click="removeRenderPoint">移除渲染点</button>
    <button @click="addRenderColorPoint">新增颜色渲染点</button>
    <button @click="changeSvgColor">改变颜色</button>
    <button @click="addTestMarker">新增测试marker</button>
    <button @click="removeEvent">移除掉注册的事件</button>
    <button @click="addTipsMarke">新增tip</button>
  </div>

  <div style="position: relative; width: 40px">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="40"
      viewBox="0 0 712.348 1012.246"
    >
      <g id="智慧通道" transform="translate(-604 -34)">
        <g id="组_1" data-name="组 1" transform="translate(659.164 100.308)">
          <path
            id="路径_1"
            data-name="路径 1"
            d="M451.519,166.672H373.84c-12.2,0-22.165,9.151-22.165,20.335V471.692H473.683V187.007c0-11.184-9.964-20.335-22.165-20.335Zm1.83,81.339H372.01V227.676h81.339v20.335Zm-257.03,65.518-4.047-8.48L173.93,361.6a44,44,0,0,1-5.9,10.777l-36.745,54.5a22.307,22.307,0,0,0-2.583,17.284,22.739,22.739,0,0,0,9.923,14.438,23.188,23.188,0,0,0,13.6,4.433,20.251,20.251,0,0,0,4.962,0,22,22,0,0,0,14.478-10.96l34.711-53.887a142.783,142.783,0,0,0,10.859-22.1l10.066-29.424-2.745-1.566A77.515,77.515,0,0,1,196.3,313.529h.02Zm66.494-141.814c22.775.2,41.422-18.871,41.706-42.7,0-24.1-18.688-43.679-41.686-43.679-23.019,0-41.686,19.582-41.686,43.679.285,23.832,18.911,42.906,41.686,42.7Z"
            transform="translate(0)"
            fill="#2a81cb"
          />
          <path
            id="路径_2"
            data-name="路径 2"
            d="M307.585,452.639l-32.169-61.41-1.1-1.891-3.132-4.8,2.379-12.506,10.289-43.516c6.019-27.919-10.249-55.8-36.745-62.9a40,40,0,0,0-12.506-2.135A27.35,27.35,0,0,0,212.4,270.42l-41.523,41.361a45.112,45.112,0,0,0-5.9,9.069l-23.893,52.728a20.05,20.05,0,0,0-.813,15.495,18.847,18.847,0,0,0,10.371,11.042,20.274,20.274,0,0,0,26.984-8.825l24.3-53.358,7-6.914-6.06,27.513c-6.06,23.486-3.152,57.71,44.268,84.47l1.484.976,14.153,26.76a443.91,443.91,0,0,1,14.844,74.445,21.667,21.667,0,0,0,9.191,15.19,24.27,24.27,0,0,0,13.929,4.433h2.928a23.688,23.688,0,0,0,15.434-8.48,25.012,25.012,0,0,0,4.779-19.216l-8.988-65.03a76.356,76.356,0,0,0-7.32-19.44h.02Z"
            transform="translate(-5.811 -93.113)"
            fill="#2a81cb"
          />
          <path
            id="路径_3"
            data-name="路径 3"
            d="M489.5,453.7a18.911,18.911,0,0,0-9.191-11.143l-36.745-19.216-9.517,40.791,28.306,15.759a17.691,17.691,0,0,0,9.354,2.888,21.148,21.148,0,0,0,15.861-9.761,23.385,23.385,0,0,0,2.542-19.115l-.61-.2Z"
            transform="translate(-160.193 -176.914)"
            fill="#2a81cb"
          />
        </g>
        <path
          id="路径_4"
          data-name="路径 4"
          d="M283.937,905.283c32.79,52.2,128.957,86.751,243.467,86.751,11.041,0,20.079,4.519,20.168,10.106.089,5.565-8.949,10.106-20.168,10.106-132.675,0-243.267-39.4-279.6-98.972-2.894-5.12,2.849-11.064,12.778-13.268,9.884-2.226,20.324.156,23.352,5.276ZM512,0C708.719,0,868.174,164.263,868.174,366.859c0,127.777-102.111,256.067-196.986,347.67a21.813,21.813,0,0,1,6.077,1.669c71.992,30.586,124.973,79.382,138.24,132.408,12.778,51.022-20.369,98.193-91,129.024-8.1,3.428-20.68,2.671-28-1.736-7.279-4.408-6.567-10.752,1.491-14.18,61.841-27.047,91.759-68.363,81.942-113.107-10.2-46.481-55.719-89.244-119.1-116.068a15.938,15.938,0,0,1-5.053-3.361q-10.051,9.349-19.812,18.12c55.875,21.66,96.991,58.947,104.849,101.287,12.4,66.961-83.144,121.233-213.415,121.233S301.59,915.545,314.012,848.584c6.834-36.886,38.89-69.9,83.923-92.138q-10.07-8.783-19.945-17.786c-54.072,26.335-93.429,65.8-103.112,109.924-1.224,5.565-10.24,10.084-20.146,10.084s-16.807-4.519-15.4-10.084c12.689-50.755,58.924-96.1,121.188-126.13-96.946-91.737-204.689-223.41-204.689-355.573C155.826,164.263,315.281,0,512,0Zm94.052,773.3-1.714,1.447C551.58,819.2,512,845.913,512,845.913s-35.328-23.686-83.745-63.644c-31.855,16.25-53.76,39.958-57.344,66.337-6.678,49.085,63.4,88.888,156.494,88.888,93.117,0,163.172-39.8,156.494-88.888-4.319-31.722-35.083-59.57-77.846-75.308ZM512,66.783c-159.833,0-289.391,129.558-289.391,289.391S352.167,645.565,512,645.565,801.391,516.007,801.391,356.174c0-157.54-125.885-285.674-282.557-289.3Z"
          transform="translate(448.174 34)"
          fill="#2a81cb"
        />
      </g>
    </svg>
  </div>

  <div id="mapDiv"></div>
</template>

<style lang="scss">
#mapDiv {
  width: 80vw;
  height: 80vh;
}

.circle-marker-content {
  // display: none;
  position: relative;
  top: 50%;
  left: 50%;
  height: 1.8vh;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  text-align: center;
  background: #ff2511;
  border: 1px solid #f32310;
  box-shadow: 0px 0px 14px #ff1c07;
  z-index: 1000;

  .item_count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff1109;
    font-weight: bold;
    font-size: 13px;
    z-index: 10;
  }

  @keyframes scaless {
    0% {
      transform: scale(0);
      opacity: 1;
    }

    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  .item {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 10vh;
    width: 10vh;
  }

  .item:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #fc0000;
    border-radius: 100%;
    opacity: 0;
    background-color: #ff0000;
    animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);
  }

  .item1:before {
    animation-delay: 0s;
  }

  .item2:before {
    animation-delay: 1s;
  }

  .item3:before {
    animation-delay: 2s;
  }

  .item4:before {
    animation-delay: 3s;
  }

  .item5::before {
    animation-delay: 4s;
  }
}

/* 右侧提示 */
[data-tooltip-bsgoal]:hover::after {
  content: attr(data-tooltip-bsgoal);
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  left: 80%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}
.bsgoal_marker_tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}
</style>
